<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>减肥打卡 - 体重记录</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 开屏动画 -->
  <div class="splash-screen" id="splashScreen">
    <div class="splash-content">
      <div class="logo-container">
        <div class="logo-icon">
          <i class="fas fa-weight"></i>
        </div>
        <h1 class="app-title">减肥打卡</h1>
        <p class="app-subtitle">科学减重，健康生活</p>
      </div>
      <div class="loading-animation">
        <div class="loading-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>

    <!-- 兑换确认弹窗 -->
    <div class="modal" id="exchangeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3><i class="fas fa-gift"></i> 确认兑换</h3>
          <button class="modal-close" id="closeExchangeModalBtn">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="exchange-confirm">
            <div class="item-preview">
              <div class="item-icon" id="confirmItemIcon">
                <i class="fas fa-gift"></i>
              </div>
              <div class="item-info">
                <h4 id="confirmItemName">商品名称</h4>
                <p id="confirmItemDesc">商品描述</p>
              </div>
            </div>
            <div class="exchange-cost">
              <span>消耗积分：</span>
              <span class="cost-value" id="confirmItemCost">0</span>
            </div>
            <div class="current-points">
              <span>当前积分：</span>
              <span class="points-value" id="confirmCurrentPoints">0</span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-secondary" id="cancelExchangeBtn">取消</button>
          <button class="btn-primary" id="confirmExchangeBtn" onclick="handleConfirmExchange();">确认兑换</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 主应用容器 -->
  <div class="app-container" id="appContainer">
    <!-- 首页 -->
    <div class="page" id="homePage">
      <div class="container">
        <header class="main-header">
          <div class="header-content">
            <div class="user-greeting">
              <h2>早上好！</h2>
              <p>今天也要加油哦</p>
            </div>
            <div class="level-badge">
              <div class="badge-icon">
                <i class="fas fa-trophy"></i>
              </div>
              <div class="badge-info">
                <span class="badge-level" id="level">等级 1</span>
                <span class="badge-points" id="points">0 积分</span>
              </div>
            </div>
          </div>
        </header>

        <section class="weight-overview">
          <div class="overview-card">
            <div class="card-header">
              <h3><i class="fas fa-weight"></i> 今日体重</h3>
              <span class="card-date" id="todayDate"></span>
            </div>
            <div class="weight-display">
              <span class="weight-value" id="todayWeight">--</span>
              <span class="weight-unit">kg</span>
            </div>
            <div class="weight-trend" id="weightTrend">
              <span class="trend-text">暂无数据</span>
            </div>
          </div>
        </section>

        <section class="chart-section">
          <div class="chart-card">
            <div class="card-header">
              <h3><i class="fas fa-chart-line"></i> 体重趋势</h3>
              <span class="chart-period">最近7天</span>
            </div>
            <canvas id="weightChart"></canvas>
          </div>
        </section>

        <section class="quick-actions">
          <div class="action-card primary" onclick="showPage('recordPage')">
            <div class="action-icon">
              <i class="fas fa-plus"></i>
            </div>
            <div class="action-content">
              <h4>记录体重</h4>
              <p>记录今日体重数据</p>
            </div>
          </div>
          <div class="action-card" onclick="showPage('sportPage')">
            <div class="action-icon">
              <i class="fas fa-running"></i>
            </div>
            <div class="action-content">
              <h4>运动记录</h4>
              <p>记录运动消耗</p>
            </div>
          </div>
          <div class="action-card" onclick="showPage('dietPage')">
            <div class="action-icon">
              <i class="fas fa-apple-alt"></i>
            </div>
            <div class="action-content">
              <h4>饮食推荐</h4>
              <p>健康饮食建议</p>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- 记录页面 -->
    <div class="page" id="recordPage">
      <div class="container">
        <header class="page-header">
          <button class="back-btn" onclick="showPage('homePage')">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1>体重记录</h1>
        </header>

        <section class="record-form">
          <div class="form-card">
            <div class="form-header">
              <h3><i class="fas fa-edit"></i> 记录今日体重</h3>
            </div>
            <div class="form-group">
              <label>体重</label>
              <div class="input-wrapper has-icon-left has-unit unit-kg icon-weight">
                <input type="number" id="weightInput" min="20" max="300" step="0.1" placeholder="请输入体重">
              </div>
            </div>
            <button class="btn-primary" id="saveWeightBtn">
              <i class="fas fa-save"></i> 保存记录
            </button>
          </div>
        </section>

        <section class="history-section">
          <div class="history-card">
            <div class="card-header">
              <h3><i class="fas fa-history"></i> 最近记录</h3>
              <span class="record-count" id="recordCount">0 条记录</span>
            </div>
            <div class="history-list" id="weightHistory"></div>
          </div>
        </section>
      </div>
    </div>

    <!-- 运动页面 -->
    <div class="page" id="sportPage">
      <div class="container">
        <header class="page-header">
          <button class="back-btn" onclick="showPage('homePage')">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1>运动记录</h1>
        </header>

        <section class="sport-overview">
          <div class="overview-card">
            <div class="card-header">
              <h3><i class="fas fa-fire"></i> 今日运动</h3>
              <span class="total-calories" id="todayCalories">0 千卡</span>
            </div>
            <div class="sport-summary" id="todaySports">
              <div class="empty-state">
                <i class="fas fa-running"></i>
                <p>今天还没有运动记录</p>
              </div>
            </div>
          </div>
        </section>

        <section class="sport-actions">
          <button class="btn-primary btn-large" id="addSportBtn">
            <i class="fas fa-plus"></i> 添加运动
          </button>
        </section>

        <section class="sport-history">
          <div class="history-card">
            <div class="card-header">
              <h3><i class="fas fa-clock"></i> 运动历史</h3>
            </div>
            <div class="history-list" id="sportHistory"></div>
          </div>
        </section>
      </div>
    </div>

    <!-- 饮食页面 -->
    <div class="page" id="dietPage">
      <div class="container">
        <header class="page-header">
          <button class="back-btn" onclick="showPage('homePage')">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1>饮食推荐</h1>
        </header>

        <section class="diet-overview">
          <div class="overview-card">
            <div class="overview-header">
              <div class="overview-icon">
                <i class="fas fa-apple-alt"></i>
              </div>
              <div class="overview-info">
                <h3>本周饮食计划</h3>
                <p>科学搭配，营养均衡</p>
              </div>
            </div>
            <div class="overview-stats">
              <div class="stat-item">
                <span class="stat-value" id="weeklyCalories">0</span>
                <span class="stat-label">本周总热量</span>
              </div>
              <div class="stat-item">
                <span class="stat-value" id="avgCalories">0</span>
                <span class="stat-label">日均热量</span>
              </div>
            </div>
          </div>
        </section>

        <section class="diet-tabs">
          <div class="week-tabs">
            <div class="tab-item active" onclick="switchDietDay(0, this)">
              <span class="day-icon">🌅</span>
              <span class="day-name">周一</span>
            </div>
            <div class="tab-item" onclick="switchDietDay(1, this)">
              <span class="day-icon">🌤️</span>
              <span class="day-name">周二</span>
            </div>
            <div class="tab-item" onclick="switchDietDay(2, this)">
              <span class="day-icon">☀️</span>
              <span class="day-name">周三</span>
            </div>
            <div class="tab-item" onclick="switchDietDay(3, this)">
              <span class="day-icon">🌤️</span>
              <span class="day-name">周四</span>
            </div>
            <div class="tab-item" onclick="switchDietDay(4, this)">
              <span class="day-icon">🌅</span>
              <span class="day-name">周五</span>
            </div>
            <div class="tab-item" onclick="switchDietDay(5, this)">
              <span class="day-icon">🌤️</span>
              <span class="day-name">周六</span>
            </div>
            <div class="tab-item" onclick="switchDietDay(6, this)">
              <span class="day-icon">☀️</span>
              <span class="day-name">周日</span>
            </div>
          </div>
        </section>

        <section class="diet-content">
          <div class="diet-card">
            <div class="diet-header">
              <div class="diet-day-info">
                <h3 id="currentDayName">周一</h3>
                <p id="currentDayTip">周一开启健康一周，蛋白质充足</p>
              </div>
              <div class="diet-calories">
                <span class="calories-value" id="currentDayCalories">1450</span>
                <span class="calories-unit">千卡</span>
              </div>
            </div>
            
            <div class="meals-container">
              <div class="meal-item">
                <div class="meal-header">
                  <div class="meal-icon">
                    <i class="fas fa-sun"></i>
                  </div>
                  <h4>早餐</h4>
                  <span class="meal-time">07:00-08:00</span>
                </div>
                <div class="meal-content" id="breakfastContent">
                  <!-- 早餐内容 -->
                </div>
              </div>
              
              <div class="meal-item">
                <div class="meal-header">
                  <div class="meal-icon">
                    <i class="fas fa-cloud-sun"></i>
                  </div>
                  <h4>午餐</h4>
                  <span class="meal-time">12:00-13:00</span>
                </div>
                <div class="meal-content" id="lunchContent">
                  <!-- 午餐内容 -->
                </div>
              </div>
              
              <div class="meal-item">
                <div class="meal-header">
                  <div class="meal-icon">
                    <i class="fas fa-moon"></i>
                  </div>
                  <h4>晚餐</h4>
                  <span class="meal-time">18:00-19:00</span>
                </div>
                <div class="meal-content" id="dinnerContent">
                  <!-- 晚餐内容 -->
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="nutrition-tips">
          <div class="tips-card">
            <div class="card-header">
              <h3><i class="fas fa-lightbulb"></i> 营养小贴士</h3>
            </div>
            <div class="tips-content" id="nutritionTips"></div>
          </div>
        </section>
      </div>
    </div>

    <!-- 我的页面 -->
    <div class="page" id="profilePage">
      <div class="container">
        <header class="page-header">
          <h1>我的</h1>
        </header>

        <section class="profile-header">
          <div class="profile-card">
            <div class="profile-info">
              <div class="avatar">
                <i class="fas fa-user"></i>
              </div>
              <div class="user-details">
                <h3>减肥达人</h3>
                <p>坚持就是胜利！</p>
              </div>
            </div>
          </div>
        </section>

        <section class="stats-overview">
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon">
                <i class="fas fa-trophy"></i>
              </div>
              <div class="stat-content">
                <span class="stat-value" id="profileLevel">等级 1</span>
                <span class="stat-label">当前等级</span>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon">
                <i class="fas fa-star"></i>
              </div>
              <div class="stat-content">
                <span class="stat-value" id="profilePoints">0</span>
                <span class="stat-label">总积分</span>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon">
                <i class="fas fa-calendar-check"></i>
              </div>
              <div class="stat-content">
                <span class="stat-value" id="recordDays">0</span>
                <span class="stat-label">记录天数</span>
              </div>
            </div>
          </div>
        </section>

        <section class="achievements">
          <div class="achievement-progress">
            <h3><i class="fas fa-medal"></i> 成就进度</h3>
            <div class="progress-bar">
              <div class="progress-fill" id="achievementProgressFill"></div>
            </div>
            <p>已解锁 <span id="achievementStats">0/0</span> 个成就</p>
          </div>
          
          <div class="achievements-card">
            <div class="card-header">
              <h3><i class="fas fa-trophy"></i> 成就列表</h3>
            </div>
            <div class="achievements-list" id="achievementList"></div>
          </div>
        </section>
      </div>
    </div>

    <!-- 兑换页面 -->
    <div class="page" id="exchangePage">
      <div class="container">
        <header class="page-header">
          <h1>积分兑换</h1>
        </header>

        <section class="exchange-header">
          <div class="points-card">
            <div class="points-info">
              <div class="points-icon">
                <i class="fas fa-star"></i>
              </div>
              <div class="points-details">
                <h3>我的积分</h3>
                <p class="points-value" id="exchangePoints">0</p>
              </div>
            </div>
            <div class="points-actions">
              <button class="btn-secondary btn-small" onclick="showPage('historyPage')">
                <i class="fas fa-history"></i> 领取记录
              </button>
            </div>
          </div>
        </section>

        <section class="exchange-categories">
          <div class="category-tabs">
            <div class="tab-item active" onclick="switchExchangeCategory('all', this)">
              <i class="fas fa-th-large"></i>
              <span>全部</span>
            </div>
            <div class="tab-item" onclick="switchExchangeCategory('food', this)">
              <i class="fas fa-utensils"></i>
              <span>美食</span>
            </div>
            <div class="tab-item" onclick="switchExchangeCategory('rest', this)">
              <i class="fas fa-bed"></i>
              <span>休息</span>
            </div>
            <div class="tab-item" onclick="switchExchangeCategory('reward', this)">
              <i class="fas fa-gift"></i>
              <span>奖励</span>
            </div>
          </div>
        </section>

        <section class="exchange-items">
          <div class="items-grid" id="exchangeItemsGrid"></div>
        </section>
      </div>
    </div>

    <!-- 领取记录页面 -->
    <div class="page" id="historyPage">
      <div class="container">
        <header class="page-header">
          <button class="back-btn" onclick="showPage('exchangePage')">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1>领取记录</h1>
        </header>

        <section class="history-content">
          <div class="history-card">
            <div class="card-header">
              <h3><i class="fas fa-history"></i> 兑换历史</h3>
            </div>
            <div class="history-list" id="exchangeHistoryList">
              <!-- 记录列表将在这里动态生成 -->
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
      <div class="nav-item active" onclick="showPage('homePage')">
        <span class="nav-icon"><i class="fas fa-home"></i></span>
        <span class="nav-text">首页</span>
      </div>
      <div class="nav-item" onclick="showPage('recordPage')">
        <span class="nav-icon"><i class="fas fa-chart-line"></i></span>
        <span class="nav-text">记录</span>
      </div>
      <div class="nav-item" onclick="showPage('sportPage')">
        <span class="nav-icon"><i class="fas fa-dumbbell"></i></span>
        <span class="nav-text">运动</span>
      </div>
      <div class="nav-item" onclick="showPage('dietPage')">
        <span class="nav-icon"><i class="fas fa-utensils"></i></span>
        <span class="nav-text">饮食</span>
      </div>
      <div class="nav-item" onclick="showPage('exchangePage')">
        <span class="nav-icon"><i class="fas fa-gift"></i></span>
        <span class="nav-text">兑换</span>
      </div>
      <div class="nav-item" onclick="showPage('profilePage')">
        <span class="nav-icon"><i class="fas fa-user"></i></span>
        <span class="nav-text">我的</span>
      </div>
    </nav>
  </div>

  <!-- 运动记录弹窗 -->
  <div class="modal" id="sportModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3><i class="fas fa-plus"></i> 记录运动</h3>
        <button class="modal-close" id="closeSportModalBtn">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>运动类型</label>
          <div class="input-wrapper has-icon-left icon-sport">
            <select id="sportType">
              <option value="跑步">🏃‍♂️ 跑步</option>
              <option value="骑行">🚴‍♂️ 骑行</option>
              <option value="游泳">🏊‍♂️ 游泳</option>
              <option value="健身">💪 健身</option>
              <option value="瑜伽">🧘‍♀️ 瑜伽</option>
              <option value="跳绳">⏰ 跳绳</option>
              <option value="篮球">🏀 篮球</option>
              <option value="足球">⚽ 足球</option>
              <option value="羽毛球">🏸 羽毛球</option>
              <option value="网球">🎾 网球</option>
              <option value="乒乓球">🏓 乒乓球</option>
              <option value="爬山">⛰️ 爬山</option>
              <option value="快走">🚶‍♂️ 快走</option>
              <option value="慢走">🚶‍♀️ 慢走</option>
              <option value="跳舞">💃 跳舞</option>
              <option value="拳击">🥊 拳击</option>
              <option value="跆拳道">🥋 跆拳道</option>
              <option value="滑板">🛹 滑板</option>
              <option value="轮滑">⛸️ 轮滑</option>
              <option value="滑雪">⛷️ 滑雪</option>
              <option value="高尔夫">⛳ 高尔夫</option>
              <option value="保龄球">🎳 保龄球</option>
              <option value="台球">🎱 台球</option>
              <option value="仰卧起坐">💪 仰卧起坐</option>
              <option value="俯卧撑">🏋️ 俯卧撑</option>
              <option value="深蹲">🦵 深蹲</option>
              <option value="平板支撑">🧘 平板支撑</option>
              <option value="引体向上">🏋️‍♂️ 引体向上</option>
              <option value="铃壶">🏋️ 铃壶</option>
              <option value="其他">🎯 其他</option>
            </select>
          </div>
        </div>
        <div class="form-group" id="sportDistanceGroup" style="display: none;">
          <label>运动距离</label>
          <div class="input-wrapper has-icon-left has-unit unit-km icon-distance">
            <input type="number" id="sportDistance" min="0.1" max="100" step="0.1" placeholder="请输入距离">
          </div>
        </div>
        <div class="form-group" id="sportCountGroup" style="display: none;">
          <label>运动个数</label>
          <div class="input-wrapper has-icon-left has-unit unit-count icon-count">
            <input type="number" id="sportCount" min="1" max="1000" step="1" placeholder="请输入个数">
          </div>
        </div>
        <div class="form-group">
          <label>运动时长</label>
          <div class="input-wrapper has-icon-left has-unit unit-min icon-time">
            <input type="number" id="sportDuration" min="1" max="300" step="1" placeholder="请输入时长">
          </div>
        </div>
        <div class="form-group" id="sportIntensityGroup">
          <label>运动强度</label>
          <div class="input-wrapper has-icon-left icon-intensity">
            <select id="sportIntensity">
              <option value="低强度">😌 低强度</option>
              <option value="中强度">😊 中强度</option>
              <option value="高强度">😤 高强度</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label>消耗热量</label>
          <div class="input-wrapper has-icon-left has-unit unit-cal icon-calories">
            <input type="number" id="sportCalories" min="1" max="2000" step="1" placeholder="请输入消耗">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="closeSportModalBtn2">取消</button>
        <button class="btn-primary" id="saveSportBtn">保存</button>
      </div>
    </div>
  </div>

  <script src="main.js"></script>
</body>
</html> 